<!DOCTYPE html>
<html>

<%- include("head.ejs", {title: title}) %>
<body>
	<div>
		<%- include("header.ejs", {title: title}) %>
	</div>
	<div class="mb40">
		<div class="gd-main head-banner">
			<img src="./images/help-banner.png" alt="">
			<div class="content">
				<h1>提供全面的维护服务</h1>
				<h2>确保客户的应用始终保持最佳性能和安全性</h2>
				<p>诚信·创新·卓越·自主</p>
			</div>
		</div>
	</div>
	<div class="gd-main gd-bflex mb60">
		<div class="left-nav">
			<div class="letf-title">帮助中心</div>
			<ul>
				<%for(var i=0; i < leftList.length; i++){%>
					<li class="tab_item">
						<%=leftList[i].title%>
					</li>
					<%}%>
			</ul>
		</div>
		<div class="rigth-nav">
			<ul class="rigth-content">
				<li class="item active">
					<div class="help-box">
						<%for(var i=0; i < leftList.length; i++){%>
							<div class="pic">
								<p>
									<%=leftList[i].msg%>
								</p>
							</div>
						<%}%>
					</div>
				</li>
				<li class="item">
					<img src="./images/header.png" alt="">

					<table class="suggestion-box">

					</table>

					

				</li>
				<li class="item">
					<!-- <ul class="form">
						<li><span class="label">对方名字/编号</span>  <input class="input-text" type="text" value="" id="name"></li>
						<li><span class="label">对方所属部门</span> <input class="input-text" type="text" value="" id="dept"></li>
						<li>
							<p>投诉内容</p>
							<textarea class="input-area" name="content" id="content" rows="8" cols="100"></textarea>
						</li>
	 					<li>

							<button id="submit" type="button" class="btn btn-primary">
								提交
							</button>

						</li>
					</ul> -->

					<form id="formData" class="form">
						<div class="form-group row">
							<label for="name" class="col-sm-2 col-form-label">对方名字/编号</label>
							<div class="col-sm-10">
							  <input type="text" class="form-control" name="name" placeholder="请输入对方名字/编号" id="name" required>
							</div>
						</div>
						<div class="form-group row">
						  <label for="dept" class="col-sm-2 col-form-label">对方所属部门</label>
						  <div class="col-sm-10">
							<input type="text" class="form-control" name="dept" id="dept" placeholder="请输入对方所属部门" required>
						  </div>
						</div>
						<div class="form-group row">
						  <label for="content" class="col-sm-2 col-form-label">投诉内容</label>
						  <div class="col-sm-10">
							<textarea class="form-control" id="content" name="content" rows="8" placeholder="请输入投诉内容" required></textarea>
						  </div>
						</div>

						<div class="form-group row">
							<label for="content" class="col-sm-2 col-form-label">反馈图片</label>
							<div class="col-sm-10">
								<input type="file" id="file" name="file" accept="image/*" placeholder="请选择图片">
							</div>
						</div>
						
						<button type="submit" class="btn btn-primary" id="submit">提交</button>
					</form>

				</li>
			</ul>

		</div>
	</div>


	<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby=" 
" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLabel">提交提示</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			提交成功！
		</div>
	  </div>
	</div>
  </div>



	<div>
		<%- include("footer.ejs") %>
	</div>
	<script>
		var mySwiper = new Swiper('.swiper', {
			watchOverflow: true,//因为仅有1个slide，swiper无效
			navigation: {
				nextEl: '.swiper-button-next',//自动隐藏
				prevEl: '.swiper-button-prev',//自动隐藏
			},
			pagination: {
				el: '.swiper-pagination',//自动隐藏
			},
			scrollbar: {
				el: '.swiper-scrollbar',//自动隐藏
			},
		})
		$(document).ready(function () {

			$('#formData').on('submit', function(event) {
				event.preventDefault(); // 阻止表单提交以进行自定义验证
				var form = this;
				if (this.checkValidity()) { // 检查表单的有效性（HTML5验证）
					// 表单有效，可以进行提交或其他操作
					postFrom(); // 提交表单（如果需要）
				} else {
					// 表单无效，显示错误消息等操作
					alert('表单无效!');
				}
				form.classList.add('was-validated'); // 添加was-validated类以显示反馈样式
			});
		});	
		$(".left-nav ul li").click(function () {
			var index = $(this).index();
			$(".left-nav ul li").removeClass("active")
			$(this).addClass("active")
			$(".rigth-nav .rigth-content .item").removeClass("active")
			$(".rigth-nav .rigth-content .item").eq(index).addClass("active")
		})
		function postFrom() {
			var file = $('#file').val();
			var name = $('#name').val();
			var dept = $('#dept').val();
			var content = $('#content').val() || '';

			var datajson = {
				name: name,
				dept: dept,
				content: content,
				type: 'json'
			}
			var formData = new FormData($('#formData')[0]);

			if (file) {
				$.ajax({
				type: "POST",
				url: "data/submit?type=file",
				data: formData,
				async: false,
				cache: false,
				contentType: false,
				processData: false,
				// dataType: file ? null : 'json',
				success: function (data) {
					console.log(data.data, 'success');
					if (data.code == 200) {
						$('#exampleModal').modal('show')
						setTimeout(function () {
							$('#exampleModal').modal('hide')
							window.location.reload()
						}, 1000)
					} else {
						console.log('提交失败')
					}
				}
			})
			}else {
				$.ajax({
				type: "POST",
				url: "data/submit?type=json",
				data: datajson,
				dataType: 'json',
				success: function (data) {
					// console.log(data, 'success');
					if (data.code == 200) {
						$('#exampleModal').modal('show')
						setTimeout(function () {
							$('#exampleModal').modal('hide')
							window.location.reload()
						}, 1000)
					} else {
						console.log('提交失败')
					}
				}
			})
			}

			
		}
	</script>

</body>

</html>